<template>
  <div class="tableRow">
    <el-row class="select-list" v-permission="'system:online:query'">
      <el-form :model="queryParams" ref="queryForm" :label-position="'right'" label-width="80px" :inline="true"
               size="mini">
        <el-form-item label="登录地址" prop="ipaddr">
          <el-input
              v-model="queryParams.ipaddr"
              placeholder="请输入登录地址"
              clearable
              size="small"
              @keyup.enter.native="onSearch"
              style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              size="small"
              @keyup.enter.native="onSearch"
              style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
          </el-button>
          <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                     @click="onRefreshSelectForm">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>

      <el-table
          :data="data.slice((page.pageNum-1)*page.pageSize,page.pageNum*page.pageSize)"
          class="dataTable"
      >
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会话编号" align="center" prop="sessionId" :show-overflow-tooltip="true"/>
        <el-table-column label="登录名称" align="center" prop="loginName" :show-overflow-tooltip="true"/>
        <el-table-column label="部门名称" align="center" prop="deptName"/>
        <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true"/>
        <el-table-column label="登录地点" align="center" prop="loginLocation"/>
        <el-table-column label="浏览器" align="center" prop="browser"/>
        <el-table-column label="操作系统" align="center" prop="os"/>
        <el-table-column label="登录时间" align="center" prop="lastAccessTime" width="180" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding">
          <template slot-scope="scope">
            <el-button
                v-permission="'monitor:online:forceLogout'"
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                @click="handleForceLogout(scope.row)"
            >强退
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--region 分页-->
      <el-pagination class="pageRow" v-if="page" @size-change="handleSizeChange"
                     @current-change="handleIndexChange"
                     :page-size="page.pageSize"
                     :page-sizes="page.pageArray" :current-page="page.pageNum"
                     layout="total,sizes, prev, pager, next"
                     :total="page.total"/>
    </el-row>
  </div>

</template>
<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import {forceLogout, getOnlineList} from '@/api/online';

@Component
export default class Online extends Vue {
  @Ref('queryForm') private queryForm: any;
  // 表格数据
  data: any = [];
  // 查询参数
  queryParams: any = {
    ipaddr: undefined,
    userName: undefined
  };
  // 分页参数
  page: any = {
    // 总条数
    total: 0,
    pageNum: 1,
    pageSize: 10,
    pageArray: [10, 20, 50, 100]
  };

  // 切换每页显示的数量
  handleSizeChange(size: number) {
    if (this.page) {
      this.page.pageNum = 1;
      this.page.pageSize = size;
    }
  }

  // 切换页码
  handleIndexChange(pageNum: number) {
    if (this.page) {
      this.page.pageNum = pageNum;
    }
  }

  getData() {
    getOnlineList(this.queryParams).then((response: any) => {
      this.data = response.rows;
      this.page.total = response.total;
    }).catch((e) => {
      console.log(e);
    });
  }

  /** 搜索按钮操作 */
  onSearch() {
    this.page.pageNum = 1;
    this.getData();
  }

  /** 重置按钮操作 */
  onRefreshSelectForm() {
    this.queryForm.resetFields();
    this.onSearch();
  }

  /** 强退按钮操作 */
  handleForceLogout(row) {
    this.$confirm('是否确认强退名称为"' + row.loginName + '"的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(function () {
      return forceLogout(row.sessionId);
    }).then((response: any) => {
      this.getData();
      this.$message.success(response.msg);
    }).catch((e) => {
      console.log(e);
    });
  }

  activated() {
    this.getData();
  }
}
</script>

<style scoped lang="scss">
.pageRow {
  margin: 10px;
  text-align: right;
  overflow: hidden;
}
</style>

